<template>
  <div class="drill">
    <div class="title">
      <p class="tip">基本信息 </p>
    </div>
    <div class="details">
      <p class="titBox">基本信息</p>
      <el-descriptions :column="5" direction="vertical">
        <el-descriptions-item label="演练单号">
          <div class="substance">{{ qhyl.qhylCode ? qhyl.qhylCode : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="系统名称">
          <div class="substance">{{ qhyl.sysName ? qhyl.sysName : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练类型">
          <div class="substance">{{ qhyl.qhylType ? qhyl.qhylType : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练分类">
          <div class="substance">{{ qhyl.qhylFl ? qhyl.qhylFl : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练时间">
          <div class="substance">{{ qhyl.qhylTime ? qhyl.qhylTime : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="本次演练是否回退">
          <div class="substance">{{
            qhyl.ifRollback == '1' ? '是' : qhyl.ifRollback == '0' ? '否' : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练场景" span="5">
          <div class="substance">{{ qhyl.qhylScene ? qhyl.qhylScene : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练目的" span="5">
          <div class="substance">{{ qhyl.qhylGoal ? qhyl.qhylGoal : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练人员" span="5">
          <div class="substance">{{ qhyl.actPname ? qhyl.actPname : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="备注" span="5">
          <div class="substance">{{ qhyl.memo ? qhyl.memo : '--' }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="Drill_plan">
      <!-- <div class="title">
        <p class="drillName">附件 </p>
      </div> -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">附件</el-menu-item>
        <el-menu-item index="2">关联演练报告</el-menu-item>
      </el-menu>
      <!-- <el-button type="primary">下载附件</el-button>
      <el-button type="primary">预览附件</el-button> -->
      <div class="tableBox">
        <div class="table" ref="container">
          <el-table
            ref="multipleTableRef"
            :data="files"
            tooltip-effect="dark"
            stripe
            v-if="if_files"
          >
            <!-- @select="selectChange"
            @selection-change="handleSelectionChange"
            row-key="getRowKey"
            @row-click="handleRowClick" -->
            <!-- <el-table-column
              align="center"
              :reserve-selection="false"
              type="selection"
            ></el-table-column> -->
            <el-table-column
              align="center"
              prop="fileName"
              label="文件名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="person.pname"
              label="上传人"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="size"
              label="文件大小"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="memo"
              label="文件描述"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="fileTime"
              label="上传时间"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhStart"
              label="计划完成状态"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="createName"
              label="创建人"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
          <el-table
            ref="multipleTableRef"
            :data="fmDrills"
            tooltip-effect="dark"
            stripe
            v-if="if_fmDrills"
          >
            <!-- @select="selectChange"
            @selection-change="handleSelectionChange"
            row-key="getRowKey"
            @row-click="handleRowClick" -->
            <!-- <el-table-column
              align="center"
              :reserve-selection="false"
              type="selection"
            ></el-table-column> -->
            <el-table-column
              align="center"
              prop="reportNo"
              label="报告单号"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="drillGoal"
              label="演练目的"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="n1"
              label="创建时间"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="state"
              label="状态"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, reactive, onMounted, watch } from 'vue';
  import { DdisasterQhylView } from '@/http/Disaster';
  // import { useRoute } from 'vue-router';
  // const router = useRouter();
  const props = defineProps({
    //是否为预览模式
    type: {
      type: String,
      default: ''
    }
  });
  const activeIndex = ref('1');
  // const route = useRoute();
  // const sysBasic = ref('');
  const fmDrills = reactive([]);
  const qhyl = ref('');
  const if_fmDrills = ref(false);
  const if_files = ref(true);
  const files = reactive([]);
  onMounted(() => {
    Disaster_change();
    if (activeIndex.value == '1') {
      if_files.value = true;
      if_fmDrills.value = false;
    } else if (activeIndex.value == '2') {
      if_fmDrills.value = true;
      if_files.value = false;
    }
  });
  const Disaster_change = () => {
    DdisasterQhylView({
      qhylId: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      qhyl.value = res.data.data.qhyl;
      fmDrills.length = 0;
      files.length = 0;
      (fmDrills as any).push(...res.data.data.fmDrills);
      (files as any).push(...res.data.data.files);
    });
  };
  const handleSelect = (key: any) => {
    if (key == '1') {
      if_files.value = true;
      if_fmDrills.value = false;
    } else if (key == '2') {
      if_fmDrills.value = true;
      if_files.value = false;
    }
  };
  watch(
    () => props.type,
    () => {
      Disaster_change();
    }
  );
</script>
<style lang="less" scoped>
  .drill {
    // width: 100%;
    // height: 100vh;
    // background: rgb(84, 84, 95);
    background: #eaeef4;
    padding: 16px 27px 27px;
    box-sizing: border-box;
    overflow: scroll;
    .title {
      display: flex;
      justify-content: space-between;
      height: 45px;
      margin-bottom: 16px;
      .tip {
        line-height: 45px;
        font-size: 24px;
        font-weight: 400;
        color: #46545d;
        margin: 0;
        padding: 0;
      }
      .btn {
        width: 107px;
        height: 45px;
        background: #007af5;
        border-radius: 2px;
        color: #fff;
        font-size: 16px;
        border: 0;
        cursor: pointer;
      }
    }
    .details {
      background: #fff;
      padding: 27px;
      border-radius: 16px;
      margin-bottom: 27px;
      .titBox {
        font-size: 21px;
        font-weight: bold;
        color: #46535d;
        margin: 0;
        padding: 0;
        margin-bottom: 25px;
      }

      .el-descriptions {
        :deep(.el-descriptions__body) {
          .el-descriptions__table {
            .el-descriptions__cell {
              font-size: 19px;
              color: #46535d;
              margin-right: 25px !important;
              width: 18%;
              &.el-descriptions__label {
                padding: 13px 0;
              }
              &.el-descriptions__content {
                .substance {
                  height: 45px;
                  background: #ffffff;
                  border-radius: 3px 3px 3px 3px;
                  border: 1px solid #dddddd;
                  line-height: 45px;
                  padding-left: 13px;
                }
                padding: 0;
                padding-right: 25px;
              }
            }

            // :deep(.el-descriptions-item__label) {
            //   //margin-right: 3px;
            //   background: #fafafa !important;
            //   padding: 10px 10px 0;
            // }
          }
        }
      }
    }
    .Drill_plan,
    .Drill {
      background: #fff;
      padding: 27px;
      border-radius: 16px;
      .title {
        display: flex;
        justify-content: space-between;
        height: 45px;
        margin-bottom: 16px;
        .drillName {
          line-height: 45px;
          font-size: 21px;
          font-weight: 400;
          color: #46545d;
          margin: 0;
          padding: 0;
        }
        .btn {
          width: 107px;
          height: 45px;
          background: #007af5;
          border-radius: 2px;
          color: #fff;
          font-size: 16px;
          border: 0;
        }
      }
    }
    .Drill_plan {
      margin-bottom: 27px;
    }
  }
</style>
